import { useState, useEffect } from "react";

export default function App() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const [count3, setCount3] = useState(0);

  useEffect(() => {
    // 书写要执行的副作用（请求函数、操作DOM），会在组件渲染后执行
    console.warn("执行副作用函数");
    // 不添加依赖，就为空数组
  }, []);
  return (
    <div>
      <div>{count1}</div>
      <div>{count2}</div>
      <div>{count3}</div>
      <button onClick={() => setCount1(count1++)}>+1</button>
      <button onClick={() => setCount2(count2++)}>+1</button>
      <button onClick={() => setCount3(count3++)}>+1</button>
    </div>
  );
}
